<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>圈子详情</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/circle.css">
    <style scoped>
      
    </style>
</head>

<body>
    <div class="app" style="height: 100vh"  v-cloak>
       <!-- 轮播 -->
       <div class="circle-video-swiper">
           <video class="fileVideo" v-if="detailCurrent.medias[0].videoPath" id="player"
                   autoplay loop webkit-playsinline playsinline x5-playsinline
                   style="width: 100%;;" :poster="detailCurrent.medias[0].imagePath" :src="detailCurrent.medias[0].videoPath">
           </video>
           <!-- 视频详情介绍 -->
           <div class="circle-video-detail-description">
               <div class="title-user">
                   <img class="title-user-img" :src="detailCurrent.headImg" alt="" >
                   <span class="title-user-nickname">{{ detailCurrent.nickName }}</span>
               </div>
               <div class="circle-video-detail-content">
                   <div class="circle-video-detail-text">
                       {{ detailCurrent.videoShotDescription }}
                       <span v-show="needOpenBtn" class="circle-video-showMore" @click="handleOpenMoreComment">...展开</span>
                   </div>
                   <div v-if="!needOpenBtn" class="circle-video-detail-other">
                       <div class="circle-video-detail-time">{{ detailCurrent.publishTime }}</div>
                       <div class="circle-video-slideup" @click="handleCloseMoreComment">收起</div>
                   </div>
               </div>
           </div>
           <!-- 按钮区 -->
           <div class="circle-comment-fixed-btns circle-comment-fixed-blackBac">
               <!-- 发表评论 -->
               <div class="circle-comment-search-btn " @click="showCommentPopBox=true">看下大家说啥了~
               </div>
               <div class="circle-share-qrcode">
                    <div class="circle-qrcode-icon">
                        <img src="https://www.tiexiemall.com/resource/img/mini.jpg" alt="">
                    </div>
                    <div class="circle-share-link">铁蟹网</div>
                </div>
           </div>
           <!-- 评论 -->
           <div class="circle-comment-pop-box" v-show="showCommentPopBox">
               <div class="circle-comment-pop-close" @click="showCommentPopBox=false"></div>
               <div class="circle-comment-box">
                   <div class="circle-comment-head">{{detailCurrent.commentNumber}}条评论</div>
                   <div class="circle-comment-list">
                       <div class="circle-comment-list-item" v-for="(item, index) in commentLists" :key="'comment' + index">
                           <img class="circle-comment-item-avator" :src="item.headImg" alt="avator">
                           <div class="circle-comment-item-box">
                               <div class="circle-comment-item-main">
                                   <div class="circle-comment-list-content">
                                       <div class="circle-comment-item-title">{{ item.nickName }}</div>
                                       <div class="circle-comment-item-content">{{ item.content }}
                                           <span class="circle-comment-item-time">{{ item.publishTime }}</span>
                                       </div>
                                   </div>
                                   <div class="circle-comment-thumpup">
                                       <img class="circle-comment-thumpup-img" :src="item.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                       <p class="circle-comment-thumpup-num">{{ item.thumbsNum }}</p>
                                   </div>
                               </div>
                               <div class="circle-comment-item-replay" v-if="item.childTopicComments && item.childTopicComments.length > 0">
                                   <template v-for="(subItem, subIndex) in item.childTopicComments" >
                                       <div class="circle-comment-list-item" v-if="subIndex === 0 || item.showMore" :key="'replay' + subIndex">
                                           <img class="circle-comment-item-avator" :src="subItem.headImg" alt="avator">
                                           <div class="circle-comment-list-content" >
                                               <div class="circle-comment-item-title">{{ subItem.nickName }}</div>
                                               <div class="circle-comment-item-content">
                                                   <span v-if="subItem.toNickName">回复 
                                                       <span class="circle-comment-replay-username" >{{subItem.toNickName}}</span> 
                                                   </span>
                                                   {{ subItem.content }}
                                                   <span class="circle-comment-item-time">{{ subItem.publishTime }}</span>
                                               </div>
                                           </div>
                                           <div class="circle-comment-thumpup">
                                               <img class="circle-comment-thumpup-img" :src="subItem.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                               <p class="circle-comment-thumpup-num">{{ subItem.thumbsNum }}</p>
                                           </div>
                                       </div>
                                   </template>
                                   <div v-if="!item.showMore && item.childTopicComments.length > 1" class="circle-comment-list-replay-morebtn" @click="showMoreComment(item, index)">展开{{item.childTopicComments.length - 1}}条回复</div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="circle-comment-list-nomore">- 没有更多了 -</div>
               </div>
           </div>
        </div>
    </div>
    <script src="../script/flexible.js"></script>
    <script src="../script/vue.min.js"></script>
    <script src="../script/iconfont.js"></script>
    <script src="../script/vant.min.js"></script>
    <script src="../script/common.js"></script>
    <script>
        var vm = new Vue({
            el: '.app',
            data: {
                // topicId: api.pageParam.topicId,
                showCommentPopBox: false, // 是否弹出评论层
                needOpenBtn: false, // 是否需要展开按钮
                thumpupIcon: '../image/default/thumpup_icon.png', // 未点赞状态
                thumpupActiveIcon: '../image/default/thumpup_selected_icon.png', // 点赞状态
                detailCurrent: 
                {
                    topicId: "1405484455308685314",
                    userId: "1386199564362330114",
                    nickName: "波2222222",
                    headImg: "http://mfs.tiexiecloud.com:81/group1/M00/00/1D/wKgAKWDL-hGAAjkqAAPOve2ZHis629_m.png",
                    createTime: 1623928581000,
                    updateTime: 1623928581000,
                    publishTime: "06-17 19:16",
                    attentionFlag: 0,
                    title: "送你22222",
                    content: "女磨破22222",
                    medias: [
                        {
                            videoPath: 'https://outin-f2bf087eca8c11eb995900163e00b174.oss-cn-shanghai.aliyuncs.com/sv/16af43b3-17a235ab753/16af43b3-17a235ab753.mp4',
                            mediaType: "0",
                            imagePath: "",
                            sequence: 0,
                            videoId: null
                        },
                    ],
                    likeNumber: 0,
                    likeFlag: null,
                    commentNumber: 0,
                    hitNumber: "0",
                    forwardNumber: null,
                    channelId: "120",
                    sort: null,
                    auditStatus: 1,
                    type: 0,
                    location: "121.323425,31.290426",
                    phone: "18017587671",
                    status: 1
                },
                commentLists: [], // 评论列表
                queryParams: {
                    channelId: null, // 列表页-推荐-二级tab类型id
                    screenType: 0, // 0: 推荐 1: 关注 2: 点在视频 3: 我的动态
                    pageNum: 1,
                    pageSize: 3,
                    topicId: '1405109482593247233', // 文章id
                    keyword: '' // 列表页搜索字段
                }
            },
            created() {
                // api.addEventListener({
                //     name:'initDetail',
                // },  (ret, err) => {
                //     this.initDetail()
                // })
            },
            mounted() {
            //    this.initVideoArray()
            },
            
            methods: {
                // 初始化视频列表 
                initVideoArray(){
                    const vm = this
                    fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_VIDEO_DETAIL, this.queryParams, false,
                        function (ret, err) {
                            if (ret && ret.code === RESPONSE_OK) {

                            } else {
                                toastBottom(ret ? ret.msg : '');
                            }
                        }
                    );
                },

                // 展开更多详情
                handleOpenMoreComment(){
                    this.needOpenBtn = false
                    this.$set(this.detailCurrent, 'videoShotDescription', this.detailCurrent.content)
                    this.$nextTick(() => {
                        this.handleChangeDetailHeight()
                    })
                },
                
                // 收起更多详情
                handleCloseMoreComment(){
                    this.needOpenBtn = true
                    this.$set(this.detailCurrent, 'videoShotDescription', this.detailCurrent.content.slice(0, subStrLength))
                    this.$nextTick(() => {
                        this.handleChangeDetailHeight()
                    })
                },

                // 展开更多回复评论
                showMoreComment(item, index){
                    this.$set(this.commentLists[index], 'showMore', true )
                },

            },
        })
        
    </script>
</body>

</html>